<template>
  <div class="mobile-container safe-area-padded">
    <div class="auth-title">注册</div>
    <div class="auth-card">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="phone"
            name="phone"
            type="tel"
            label="手机号"
            placeholder="请输入手机号"
            clearable
            required
          />
          <van-field
            v-model="password"
            name="password"
            type="password"
            label="密码"
            placeholder="请设置密码"
            clearable
            required
          />
        </van-cell-group>
        <div class="auth-actions">
          <van-button round block type="primary" :loading="submitting" native-type="submit">
            注册
          </van-button>
          <NuxtLink class="auth-footer-link" to="/auth/login">已有账号？去登录</NuxtLink>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from 'vant'

const phone = ref('')
const password = ref('')
const submitting = ref(false)

const onSubmit = async () => {
  if (!phone.value || !password.value) {
    showToast('请填写手机号和密码')
    return
  }
  try {
    submitting.value = true
    await $fetch('/api/auth/register', { method: 'POST', body: { phone: phone.value, password: password.value } })
    await navigateTo('/auth/login')
  } catch (e: any) {
    showToast(e?.data?.message || '注册失败，请重试')
  } finally {
    submitting.value = false
  }
}
</script>

